<div class="bg-primary text-white py-4">
    <div class="container">
        <h1>{{ type == targetType.Screening ? 'Screening' : 'Reporting' }}</h1>
        <div class="d-flex mb-2">
            <div class="flex-grow-1 pr-5">
                <span *ngIf="type == targetType.Screening">The Screening feature allows you to filter on various ESG criteria. You can select commonly used ‘system filters’ or create your own filters, which can be saved and shared with other account users.</span>
                <span *ngIf="type == targetType.Report">The Report Generation Tool offers you a comparative overview of your portfolio. Select from system favorites, including Best in Class, Relative Analysis and Indicator Reports. System favorite reports can either be downloaded directly in Excel, or ‘cloned’, edited and saved under your customized reports. You can also create your own reports, which can be saved and shared with other account users.</span>
            </div>
            <div class="flex-shrink-1 pl-5">
                <a *ngIf="type == targetType.Screening" class="btn btn-white bg-white text-primary" (click)="createFilter(true)"><i class="ti-plus"></i> Add New Filter</a>
                <a *ngIf="type == targetType.Report" class="btn btn-white bg-white text-primary" (click)="createFilter(false)"><i class="ti-plus"></i> Add New Report</a>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div *ngIf="filters">
        <div class="row mt-5">
            <h4>System and favorite {{ type == targetType.Screening ? 'filters' : 'reports' }}</h4>
            <i *ngIf="type == targetType.Screening" class="infoSpan" title="Simply click on the generate button to generate an Excel report on your default research universe.Use the clone button to customize this filter to a particular portfolio or benchmark, and save your own version of it."></i>
        </div>     
       
        <div class="row">
            <div *ngFor="let filter of filters | screening: true" class="col-md-3">
                <div class="card shadow filter">
                    <div class="card-body">
                        <div class="d-flex header">
                            <div *ngIf="filter.type !== filterType.Standard && filter.isCurrentUserOwner" [routerLink]="['filter', filter.id]" class="flex-grow-1" style="cursor: pointer">{{ filter.name }}</div>
                            <div *ngIf="filter.type == filterType.Standard || !filter.isCurrentUserOwner" class="flex-grow-1">{{ filter.name }}</div>
                            <div class="flex-shrink-1">
                                <img *ngIf="filter.type !== filterType.Standard && filter.isCurrentUserOwner" (click)="favouriteFilter(filter)" src="/assets/icons-svg/icon-is-favorite.svg" class="favorite-icon" />
                                <img *ngIf="filter.type == filterType.Standard" src="/assets/icons-svg/icon-logo.svg" class="logo-icon" />
                                <img *ngIf="filter.type == filterType.Shared && !filter.isCurrentUserOwner" src="/assets/icons-svg/icon-is-shared.svg" class="logo-icon" />
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="mr-auto">
                                <div class="secondary-text shared-with" *ngIf="filter.type == filterType.Shared && !filter.isCurrentUserOwner">Shared with you</div>
                                <div *ngIf="(filter.type == filterType.Shared && filter.isCurrentUserOwner) || filter.type == filterType.Private">
                                    <div class="secondary-text">Sharing</div>
                                    <ui-switch size="small" (click)="shareFilter(filter)" [checked]="filter.type == filterType.Shared"></ui-switch>
                                </div>
                                <div class="secondary-text shared-with" *ngIf="filter.type == filterType.Standard">&nbsp;</div>
                            </div>
                            <div class="ml-auto">
                                <div class="btn-group action-buttons">
                                    <button *ngIf="filter.type == filterType.Standard" id="btn-generate-standard" type="button" class="btn btn-sm btn-outline-primary-dark" (click)="generateFilter(filter)" [disabled]="filter.criteriaCount == 0">Generate</button>
                                    <button *ngIf="filter.type !== filterType.Standard" type="button" class="btn btn-sm btn-outline-primary-dark" (click)="generateFilter(filter)" [disabled]="filter.criteriaCount == 0">Generate</button>
                                    <button *ngIf="filter.type !== filterType.Standard" type="button" class="btn btn-sm btn-outline-primary-dark dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="ti-angle-down"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a class="dropdown-item" *ngIf="filter.type !== filterType.Standard && filter.isCurrentUserOwner" [routerLink]="['filter', filter.id]">Edit</a>
                                        <a class="dropdown-item" href="javascript:;;" (click)="cloneFilter(filter)">Clone</a>
                                        <a class="dropdown-item" href="javascript:;;" *ngIf="filter.type !== filterType.Standard && filter.isCurrentUserOwner" (click)="removeFilter(filter)">Delete</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <h4>{{ type == targetType.Screening ? 'Your filters' : 'Other reports' }}</h4>
            <i *ngIf="type == targetType.Screening" class="infoSpan" title="Create a new filter from scratch and access your existing filters to generate an Excel report or edit the filter."></i>
        </div> 
        <div class="row">
            <div *ngFor="let filter of filters | screening: false" class="col-md-3">
                <div class="card shadow filter">
                    <div class="card-body">
                        <div class="d-flex header">
                            <div *ngIf="filter.type != filterType.Standard && filter.isCurrentUserOwner" [routerLink]="['filter', filter.id]" class="flex-grow-1" style="cursor: pointer">{{ filter.name }}</div>
                            <div *ngIf="filter.type == filterType.Standard || !filter.isCurrentUserOwner" class="flex-grow-1">{{ filter.name }}</div>
                            <div *ngIf="filter.type != filterType.Standard && filter.isCurrentUserOwner" class="flex-shrink-1"><img src="/assets/icons-svg/icon-not-favorite.svg" (click)="favouriteFilter(filter)" class="favorite-icon" /></div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="mr-auto">
                                <div class="secondary-text shared-with" *ngIf="filter.type == filterType.Shared && !filter.isCurrentUserOwner">Shared with you</div>
                                <div *ngIf="(filter.type == filterType.Shared && filter.isCurrentUserOwner) || filter.type == filterType.Private">
                                    <div class="secondary-text">Sharing</div>
                                    <ui-switch size="small" (click)="shareFilter(filter)" [checked]="filter.type == filterType.Shared"></ui-switch>
                                </div>
                            </div>
                            <div class="ml-auto">
                                <div class="btn-group action-buttons">
                                    <button type="button" class="btn btn-sm btn-outline-primary-dark" (click)="generateFilter(filter)" [disabled]="filter.criteriaCount == 0">Generate</button>
                                    <button *ngIf="filter.type != filterType.Standard" type="button" class="btn btn-sm btn-outline-primary-dark dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="ti-angle-down"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a class="dropdown-item" *ngIf="filter.isCurrentUserOwner" [routerLink]="['filter', filter.id]">Edit</a>
                                        <a class="dropdown-item" href="javascript:;;" (click)="cloneFilter(filter)">Clone</a>
                                        <a class="dropdown-item" href="javascript:;;" *ngIf="filter.isCurrentUserOwner" (click)="removeFilter(filter)">Delete</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
